<script>
import { getAntiForgetAfter, getAntiForgetAfterBatch, updateAntiForgetAfter } from '@/api/antiForget'

export default {
  name: 'AfterClass',
  data() {
    return {
      studentName: '',
      wordLibrary: '',
      classTime: '',
      actualAntiTime: '',
      formData: {
        postClassMessage: '',
        rate: ''
      },
      ratings: {
        focus: 0,
        speaking: 0,
        vocabulary: 0,
        listening: 0,
        interaction: 0,
        all: 0
      },
      learnedWords: [],
      learnedWordsThink: [], // 分析div展示的数据
      learnedWordsThinkLearnSort: [], // 分析div展示的数据 学新数据
      charCount: 0,
      isAnimated: false,
      canKnowWord: true,
      knowWord: 0, // 学习前已掌握单词数
      reviewWord: 0, // 复习单词数
      forgetWord: 0, // 遗忘单词数
      noForgetWord: 0, // 未遗忘单词数
      knowWordList: [],
      forgetWordList: [],
      unforgetWordList: []
    }
  },
  watch: {
    ratings: {
      deep: true,
      handler(newVal) {
        const { focus, speaking, vocabulary, listening, interaction } = newVal
        const scores = [focus, speaking, vocabulary, listening, interaction]
        const sum = scores.reduce((a, b) => a + b, 0)
        this.ratings.all = Number((sum / scores.length).toFixed(2))
        this.formData.rate = `${focus},${speaking},${vocabulary},${listening},${interaction},${this.ratings.all}`
      }
    }
  },
  created() {
    this.pullData()
    this.isAnimated = true
  },
  methods: {
    handlePrint() {
      this.$msgbox({
        title: '小提示',
        message: '课后打印请前往：课程' +
          ' --> 上课历史 --> 选中具体条目打印。或者是前往：学生 --> 具体条目，更多 --> 上课历史 --> 打印。',
        showClose: false,
        closeOnClickModal: false,
        type: 'success',
        confirmButtonText: '确定'
      }).then(() => {
        setTimeout(() => {
          window.print()
        }, 500)
      })
    },
    sortWordList(type) {
      if (type === 1) {
        // 遗忘在前
        this.learnedWordsThink.sort((a, b) => b.antiForget - a.antiForget)
      } else if (type === 2) {
        // 未遗忘在前
        this.learnedWordsThink.sort((a, b) => {
          return a.antiForget - b.antiForget
        })
      } else {
        this.learnedWordsThink = []
        this.learnedWordsThinkLearnSort.forEach(item => {
          this.learnedWordsThink.push(item)
        })
      }
    },
    async pullData() {
      let res = {}
      if (this.$route.query.antiForgetId) {
        res = await getAntiForgetAfter({ antiForgetId: this.$route.query.antiForgetId })
      } else if (this.$route.query.antiForgetIdArr) {
        res = await getAntiForgetAfterBatch(JSON.parse(this.$route.query.antiForgetIdArr))
      } else {
        return
      }
      this.studentName = res.studentName
      this.wordLibrary = res.bookName
      this.classTime = res.actualStartTime
      this.actualAntiTime = res.actualAntiTime
      this.formData.postClassMessage = res.postClassMessage
      const split = res.rate.split(',')
      this.ratings = {
        focus: split[0] * 1,
        speaking: split[1] * 1,
        vocabulary: split[2] * 1,
        listening: split[3] * 1,
        interaction: split[4] * 1,
        all: split[5] * 1
      }
      this.learnedWords = res.studyWordList
      if (res.beforeStudyKnow && res.beforeStudyKnow === '1') {
        this.canKnowWord = false
      }
      this.handleData()
      // 下面的方法是填写课程总结的 如果编辑过则不需要再执行
      if (!res.postClassMessage || res.postClassMessage === '请补充该学生本堂课的表现') {
        this.makePostClassMessage()
      }
    },
    handleData() {
      if (this.$route.query.canKnowWord === 'false' && this.canKnowWord) {
        this.canKnowWord = false
      }
      if (this.canKnowWord) {
        this.learnedWords.forEach(item => {
          if (item.knowNoStudy === '0') {
            this.learnedWordsThink.push(item)
            this.learnedWordsThinkLearnSort.push(item)
          }
        })
      } else {
        this.learnedWords.forEach(item => {
          this.learnedWordsThink.push(item)
          this.learnedWordsThinkLearnSort.push(item)
        })
      }

      this.learnedWords.forEach(item => {
        if (this.canKnowWord) {
          if (item.knowNoStudy === '1') {
            this.knowWord++
            this.knowWordList.push(item)
          } else {
            this.reviewWord++
            if (item.antiForget === '0') {
              this.noForgetWord++
              this.unforgetWordList.push(item)
            } else if (item.antiForget === '1') {
              this.forgetWord++
              this.forgetWordList.push(item)
            }
          }
        } else {
          if (item.knowNoStudy === '1') {
            this.knowWord++
            this.knowWordList.push(item)
          }
          this.reviewWord++
          if (item.antiForget === '0') {
            this.noForgetWord++
            this.unforgetWordList.push(item)
          } else if (item.antiForget === '1') {
            this.forgetWord++
            this.forgetWordList.push(item)
          }
        }
      })
    },
    makePostClassMessage() {
      let knowWord = 0 // 学习前已掌握单词数
      let reviewWord = 0// 复习单词数
      let forgetWord = 0// 遗忘单词数
      let noForgetWord = 0// 未遗忘单词数
      let reviewWordEn = ''
      let noForgetWordEn = ''
      let forgetWordEn = ''
      this.learnedWords.forEach(item => {
        if (this.canKnowWord) {
          if (item.knowNoStudy === '1') {
            knowWord++
          } else {
            reviewWord++
            if (reviewWord <= 5) {
              reviewWordEn = reviewWordEn + ((item.fullSpell || item.wordFullSpell) + ', ')
            }
            if (item.antiForget === '0') {
              noForgetWord++
              if (noForgetWord <= 5) {
                noForgetWordEn = noForgetWordEn + ((item.fullSpell || item.wordFullSpell) + ', ')
              }
            } else if (item.antiForget === '1') {
              forgetWord++
              forgetWordEn += ((item.fullSpell || item.wordFullSpell) + ', ')
            }
          }
        } else {
          if (item.knowNoStudy === '1') {
            knowWord++
          }
          reviewWord++
          if (reviewWord <= 5) {
            reviewWordEn = reviewWordEn + ((item.fullSpell || item.wordFullSpell) + ', ')
          }
          if (item.antiForget === '0') {
            noForgetWord++
            if (noForgetWord <= 5) {
              noForgetWordEn = noForgetWordEn + ((item.fullSpell || item.wordFullSpell) + ', ')
            }
          } else if (item.antiForget === '1') {
            forgetWord++
            forgetWordEn += ((item.fullSpell || item.wordFullSpell) + ', ')
          }
        }
      })
      let prefix = ''
      if (this.canKnowWord) {
        prefix = '已隐藏课前学新检测认识的单词' + knowWord + '个'
      } else {
        prefix = '复习包括课前学新检测认识的单词' + knowWord + '个'
      }
      this.formData.postClassMessage = `本次抗遗忘复习情况如下：
        ${prefix}，共复习${reviewWord}个单词，具体为：${reviewWordEn.substring(0, reviewWordEn.length - 2) + '等'}，其中${noForgetWord}个单词未遗忘😄，具体为${noForgetWordEn.substring(0, noForgetWordEn.length - 2) + '等'}，其中遗忘🙁了${forgetWord}个单词，分别是 ${forgetWordEn.substring(0, forgetWordEn.length - 2)}，复习总耗时：${this.actualAntiTime}分钟，平均${(reviewWord / (this.actualAntiTime || 1)).toFixed(1)}个/分钟！
        请教师👨‍🏫补充学生👨‍🎓课堂表现！
        1、口语表达：
        2、单词掌握：
        3、听力理解：
        4、课堂互动：
        5、综合表现：`
    },
    formatDate(date) {
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    updateCharCount() {
      this.charCount = this.formData.postClassMessage.length
    },
    async handleSubmit() {
      if (!this.formData.postClassMessage.trim()) {
        this.$notify({ type: 'warning', message: '请填写抗遗忘反馈' })
        return
      }
      if (this.$route.query.antiForgetId) {
        this.formData.antiForgetId = this.$route.query.antiForgetId
        this.formData.beforeStudyKnow = this.canKnowWord ? '0' : '1'
        await updateAntiForgetAfter(this.formData)
      }
      this.$msgbox({
        title: '抗遗忘反馈提交成功',
        message: '该页面将自动关闭',
        type: 'success',
        showClose: false,
        confirmButtonText: '确定',
        center: true
      }).then(() => {
        window.close()
      }).catch(() => {
      })
    }
  }
}
</script>

<template>
  <div class="after-class-container">
    <!-- 页面标题 -->
    <div class="page-header" :class="{ 'animate-in': isAnimated }">
      <h1 class="page-title">抗遗忘反馈</h1>
      <div class="title-divider"></div>
    </div>

    <!-- 操作按钮区 -->
    <div class="action-bar" :class="{ 'animate-in': isAnimated }">
      <el-button class="print-btn" @click="handlePrint()">
        <i class="fa-solid fa-print"></i>
        <span>打印本页面</span>
      </el-button>
    </div>

    <!-- 主要内容区 -->
    <div class="feedback-content">
      <!-- 基础信息 -->
      <div class="info-card" :class="{ 'animate-in': isAnimated }">
        <div class="card-header">
          <i class="el-icon-info"></i>
          <span>基础信息</span>
        </div>
        <div class="card-body">
          <div class="basic-info">
            <div class="info-item">
              <span class="info-label">学生姓名</span>
              <span class="info-value">{{ studentName || '未填写' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">使用词库</span>
              <span class="info-value">{{ wordLibrary || '未指定' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">上课时间</span>
              <span class="info-value">{{ classTime || '未记录' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">抗遗忘时长</span>
              <span class="info-value">{{ actualAntiTime || '0' }} 分钟</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 抗遗忘反馈与评分 -->
      <div class="info-card" :class="{ 'animate-in': isAnimated }">
        <div class="card-header">
          <i class="fa-solid fa-circle-exclamation"></i>
          <span>抗遗忘反馈与评分</span>
        </div>
        <div class="card-body">
          <!-- 文本输入框 -->
          <div class="message-input-wrapper">
            <el-input
              v-model="formData.postClassMessage"
              type="textarea"
              placeholder="请输入抗遗忘反馈（记录学生复习表现、遗忘情况及改进建议）..."
              :autosize="{ minRows: 6, maxRows: 10 }"
              maxlength="500"
              class="message-input"
              @input="updateCharCount"
            />
            <div class="char-count">{{ charCount }}/500</div>
          </div>

          <!-- 打分模块 -->
          <div class="rating-section">
            <div class="rating-grid">
              <div class="rating-item">
                <span class="rating-label">课堂专注</span>
                <el-rate
                  v-model="ratings.focus"
                  show-text
                  :texts="['很差', '较差', '一般', '良好', '优秀']"
                  :colors="['#ff6b6b', '#ffc168', '#4ecdc4']"
                  class="rating-star"
                />
              </div>
              <div class="rating-item">
                <span class="rating-label">口语表达</span>
                <el-rate
                  v-model="ratings.speaking"
                  show-text
                  :texts="['很差', '较差', '一般', '良好', '优秀']"
                  :colors="['#ff6b6b', '#ffc168', '#4ecdc4']"
                  class="rating-star"
                />
              </div>
              <div class="rating-item">
                <span class="rating-label">单词掌握</span>
                <el-rate
                  v-model="ratings.vocabulary"
                  show-text
                  :texts="['很差', '较差', '一般', '良好', '优秀']"
                  :colors="['#ff6b6b', '#ffc168', '#4ecdc4']"
                  class="rating-star"
                />
              </div>
              <div class="rating-item">
                <span class="rating-label">听力理解</span>
                <el-rate
                  v-model="ratings.listening"
                  show-text
                  :texts="['很差', '较差', '一般', '良好', '优秀']"
                  :colors="['#ff6b6b', '#ffc168', '#4ecdc4']"
                  class="rating-star"
                />
              </div>
              <div class="rating-item">
                <span class="rating-label">课堂互动</span>
                <el-rate
                  v-model="ratings.interaction"
                  show-text
                  :texts="['很差', '较差', '一般', '良好', '优秀']"
                  :colors="['#ff6b6b', '#ffc168', '#4ecdc4']"
                  class="rating-star"
                />
              </div>
              <div class="rating-item rating-total">
                <span class="rating-label">综合得分</span>
                <el-rate
                  v-model="ratings.all"
                  disabled
                  show-text
                  :texts="['很差', '较差', '一般', '良好', '优秀']"
                  :colors="['#ff6b6b', '#ffc168', '#4ecdc4']"
                  class="rating-star"
                />
              </div>
            </div>

            <!-- 提交按钮 -->
            <div class="submit-btn-container" :class="{ 'animate-in': isAnimated }">
              <el-button
                type="primary"
                class="submit-btn"
                @click="handleSubmit"
              >
                <i class="fa-solid fa-paper-plane"></i>
                <span>提交抗遗忘反馈</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 复习单词分析 -->
      <div class="info-card" :class="{ 'animate-in': isAnimated }">
        <div class="card-header">
          <i class="fa-solid fa-chart-pie"></i>
          <span>复习单词分析</span>
        </div>
        <div class="card-body">
          <div class="word-stats">
            <span class="stat-item">总复习：<strong>{{ reviewWord }}</strong>个</span>
            <span class="stat-item">未遗忘：<strong>{{ noForgetWord }}</strong>个</span>
            <span class="stat-item">遗忘：<strong>{{ forgetWord }}</strong>个</span>
            <span class="stat-item">学新前已认识：<strong>{{ knowWord }}</strong>个</span>
          </div>

          <div class="word-filter">
            <el-button type="text" @click="sortWordList(1)" class="filter-btn">遗忘在前</el-button>
            <el-button type="text" @click="sortWordList(2)" class="filter-btn">未遗忘在前</el-button>
            <el-button type="text" @click="sortWordList(3)" class="filter-btn">恢复原顺序</el-button>
          </div>

          <div class="word-legend">
            <span class="legend-item">
              <span class="legend-color forget-color"></span>
              <span class="legend-text">遗忘单词</span>
            </span>
            <span class="legend-item">
              <span class="legend-color unforget-color"></span>
              <span class="legend-text">未遗忘单词</span>
            </span>
          </div>

          <div class="words-list">
            <div
              v-for="(item, index) in learnedWordsThink"
              :key="index"
              class="word-item"
              :class="item.antiForget === '1' ? 'forget' : 'unforget'"
            >
              <span class="word">{{ item.fullSpell || item.wordFullSpell || '无' }}</span>
              <span class="phonetic">{{ item.phoneticBr || '' }}</span>
              <span class="meaning">{{ item.wordMeaning || '无释义' }}</span>
            </div>
            <div v-if="learnedWordsThink.length === 0" class="empty-words">暂无复习单词记录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 全局重置与基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

.after-class-container {
  margin: 0 auto;
  padding: 30px 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 35px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.page-title {
  font-size: 28px;
  color: #2d3748;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.title-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #9f7aea, #667eea);
  border-radius: 2px;
  margin: 0 auto;
}

/* 操作栏 */
.action-bar {
  margin-bottom: 25px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out 0.2s;
}

.print-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border-radius: 8px;
  background-color: #667eea;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.print-btn:hover {
  background-color: #5a67d8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.print-btn i {
  margin-right: 8px;
  font-size: 16px;
}

/* 卡片样式 */
.feedback-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.info-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

/* 卡片动画延迟 */
.info-card:nth-child(1) { transition-delay: 0.1s; }
.info-card:nth-child(2) { transition-delay: 0.2s; }
.info-card:nth-child(3) { transition-delay: 0.3s; }

.card-header {
  display: flex;
  align-items: center;
  color: #ffffff;
  background: linear-gradient(90deg, #9f7aea, #667eea);
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 500;
}

.card-header i {
  margin-right: 10px;
  font-size: 18px;
}

.card-body {
  padding: 24px;
}

/* 基础信息样式 */
.basic-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.info-item {
  flex: 1;
  min-width: 220px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s;
  border: 1px solid #f0f2f5;
}

.info-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  border-color: #f0e9ff;
}

.info-label {
  display: block;
  font-size: 13px;
  color: #718096;
  margin-bottom: 6px;
  font-weight: 500;
}

.info-value {
  font-size: 15px;
  font-weight: 500;
  color: #2d3748;
}

/* 反馈输入框 */
.message-input-wrapper {
  position: relative;
  margin-bottom: 24px;
}

.message-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  padding: 14px 16px;
  font-size: 14px;
  color: #2d3748;
  line-height: 1.6;
  transition: all 0.3s;
}

.message-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  outline: none;
}

.char-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 12px;
  color: #718096;
}

/* 评分模块 */
.rating-section {
  margin-top: 8px;
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.rating-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.rating-total {
  background-color: #f0e9ff;
  border: 1px solid #e9d8fd;
}

.rating-label {
  font-size: 14px;
  color: #2d3748;
  font-weight: 500;
  min-width: 70px;
}

.rating-star {
  flex: 1;
}

.el-rate__text {
  font-size: 12px !important;
  color: #718096 !important;
}

/* 提交按钮 */
.submit-btn-container {
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.6s ease-out 0.8s;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 48px;
  border-radius: 8px;
  background-color: #9f7aea;
  color: #ffffff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(159, 122, 234, 0.3);
}

.submit-btn:hover {
  background-color: #805ad5;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(159, 122, 234, 0.4);
}

.submit-btn i {
  margin-right: 8px;
  font-size: 16px;
}

/* 单词统计 */
.word-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f5;
}

.stat-item {
  font-size: 14px;
  color: #4a5568;
}

.stat-item strong {
  color: #667eea;
  font-size: 15px;
  margin: 0 4px;
}

/* 单词筛选按钮 */
.word-filter {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-btn {
  font-size: 13px;
  color: #667eea !important;
  padding: 4px 12px !important;
  transition: all 0.2s;
}

.filter-btn:hover {
  color: #5a67d8 !important;
  background-color: #f0e9ff !important;
  border-radius: 4px;
}

/* 单词图例 */
.word-legend {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #718096;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.forget-color {
  background-color: #feb2b2; /* 柔和红色 - 遗忘单词 */
}

.unforget-color {
  background-color: #A7C0FF; /* 柔和青色 - 未遗忘单词 */
}

/* 单词列表 */
.words-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

/* 滚动条样式优化 */
.words-list::-webkit-scrollbar {
  width: 6px;
}

.words-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.words-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.words-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.word-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  transition: all 0.2s;
}

.word-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.forget {
  background-color: #feb2b2;
}

.unforget {
  background-color: #A7C0FF;
}

.word {
  font-weight: 600;
  color: #2d3748;
  min-width: 110px;
  font-size: 15px;
}

.phonetic {
  font-style: italic;
  color: #666666;
  min-width: 130px;
  font-size: 13px;
}

.meaning {
  color: #4a5568;
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
}

.empty-words {
  text-align: center;
  padding: 40px 0;
  color: #718096;
  font-size: 14px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

/* 动画触发类 */
.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .rating-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 768px) {
  .after-class-container {
    padding: 20px 15px;
  }

  .page-title {
    font-size: 24px;
  }

  .card-header {
    padding: 14px 18px;
    font-size: 15px;
  }

  .card-body {
    padding: 18px;
  }

  .info-item {
    min-width: 100%;
  }

  .word-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }

  .word, .phonetic, .meaning {
    min-width: 100%;
  }

  .submit-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .rating-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .rating-star {
    width: 100%;
  }

  .word-legend {
    flex-direction: column;
    gap: 12px;
  }
}

/* 打印样式优化 */
@media print {
  .after-class-container {
    background-color: #ffffff;
    padding: 0;
  }

  .action-bar, .submit-btn-container {
    display: none;
  }

  .info-card {
    box-shadow: none;
    border: 1px solid #e0e0e0;
    margin-bottom: 15px;
  }

  .card-header {
    background: #ffffff;
    color: #2d3748;
    border-bottom: 1px solid #e0e0e0;
  }

  .words-list {
    max-height: none;
    overflow: visible;
  }

  .word-item {
    page-break-inside: avoid;
  }
}
</style>
